<template>
  <t-dialog
    v-model:visible="show"
    :width="700"
    :header="formData.id ? $t('common.update') : $t('common.create')"
    :onConfirm="() => form.submit()"
    destroyOnClose
    :closeOnOverlayClick="false"
  >
    <template #body>
      <t-form ref="form" :data="formData" :rules="formRule" label-align="top" @submit="onSubmit" style="overflow: hidden;">
        <t-row :gutter="20">
          <t-col :span="4">
            <t-form-item :label="plugin.t('form.name')" name="name">
              <t-input v-model="formData.name"/>
            </t-form-item>
          </t-col>
          <t-col :span="4">
            <t-form-item :label="plugin.t('form.code')" name="code">
              <t-input v-model="formData.code" />
            </t-form-item>
          </t-col>
          <t-col :span="4">
            <t-form-item :label="plugin.t('form.type')" name="phone">
              <t-radio-group variant="default-filled" v-model="formData.type">
                <t-radio-button v-for="(item, index) in plugin.tm('form.type_text')" :value="index">{{ item }}</t-radio-button>
              </t-radio-group>
            </t-form-item>
          </t-col>
        </t-row>
        <t-tabs :default-value="1" style="margin-top: 10px">
          <t-tab-panel :value="1" :label="plugin.t('form.tabs.0')" style="padding-top: 20px">
            <t-row :gutter="20">
              <t-col :span="6">
                <t-form-item :label="plugin.t('form.classify')">
                  <t-select v-model="formData.classify_id">
                    <t-option :label="plugin.t('classify.no')" :value="0" />
                    <t-option v-for="item in classifyStore.getList()" :value="item.id" :label="item.name" />
                  </t-select>
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item :label="plugin.t('form.sname')">
                  <t-input v-model="formData.sname"/>
                </t-form-item>
              </t-col>
            </t-row>
            <t-row :gutter="20" style="margin-top: 20px">
              <t-col :span="6">
                <t-form-item :label="plugin.t('form.phone')">
                  <t-input v-model="formData.phone"/>
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item :label="plugin.t('form.email')">
                  <t-input v-model="formData.email"/>
                </t-form-item>
              </t-col>
            </t-row>
            <t-row :gutter="20" style="margin-top: 20px">
              <t-col :span="3">
                <t-form-item :label="plugin.t('form.country')">
                  <t-select v-model="formData.country">
                    <t-option v-for="item in countryData" :key="item.id" :value="item.name" :label="item.name"></t-option>
                  </t-select>
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="plugin.t('form.city')">
                  <t-input v-model="formData.city"/>
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="plugin.t('form.area')">
                  <t-input v-model="formData.area"/>
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="plugin.t('form.zip')">
                  <t-input v-model="formData.zip"/>
                </t-form-item>
              </t-col>
            </t-row>
            <t-row :gutter="20" style="margin-top: 20px">
              <t-col :span="12">
                <t-form-item :label="plugin.t('form.address')">
                  <t-input v-model="formData.address"/>
                </t-form-item>
              </t-col>
            </t-row>
          </t-tab-panel>
          <t-tab-panel :value="2" :label="plugin.t('form.tabs.1')" style="padding-top: 20px">
            <t-row :gutter="20">
              <t-col :span="6">
                <t-form-item :label="plugin.t('form.tax')">
                  <t-input v-model="formData.tax"/>
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item :label="plugin.t('form.bank')">
                  <t-input v-model="formData.bank"/>
                </t-form-item>
              </t-col>
            </t-row>
            <t-row :gutter="20" style="margin-top: 20px">
              <t-col :span="6">
                <t-form-item :label="plugin.t('form.bank_name')">
                  <t-input v-model="formData.bank_name"/>
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item :label="plugin.t('form.bank_user')">
                  <t-input v-model="formData.bank_user"/>
                </t-form-item>
              </t-col>
            </t-row>
          </t-tab-panel>
          <t-tab-panel :value="3" :label="plugin.t('form.tabs.2')" style="padding-top: 20px">
            <t-row :gutter="20">
              <t-col :span="6">
                <t-form-item :label="plugin.t('form.delivery_name')">
                  <t-input v-model="formData.delivery_name"/>
                </t-form-item>
              </t-col>
              <t-col :span="6">
                <t-form-item :label="plugin.t('form.phone')">
                  <t-input v-model="formData.delivery_phone"/>
                </t-form-item>
              </t-col>
            </t-row>
            <t-row :gutter="20" style="margin-top: 20px">
              <t-col :span="3">
                <t-form-item :label="plugin.t('form.country')">
                  <t-select v-model="formData.delivery_country">
                    <t-option v-for="item in countryData" :key="item.id" :value="item.name" :label="item.name"></t-option>
                  </t-select>
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="plugin.t('form.city')">
                  <t-input v-model="formData.delivery_city"/>
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="plugin.t('form.area')">
                  <t-input v-model="formData.delivery_area"/>
                </t-form-item>
              </t-col>
              <t-col :span="3">
                <t-form-item :label="plugin.t('form.zip')">
                  <t-input v-model="formData.delivery_zip"/>
                </t-form-item>
              </t-col>
            </t-row>
            <t-row :gutter="20" style="margin-top: 20px">
              <t-col :span="12">
                <t-form-item :label="plugin.t('form.address')">
                  <t-input v-model="formData.delivery_address"/>
                </t-form-item>
              </t-col>
            </t-row>
          </t-tab-panel>
        </t-tabs>
      </t-form>
    </template>
    <template #footer>
      <t-button theme="primary" :loading="loading" @click="form.submit()">
        {{ formData.id ? $t('common.update') : $t('common.create') }}
      </t-button>
    </template>
  </t-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import { country } from '@/api/manage'
  import clientStore from '../store'
  import classifyStore from '../store/classify'
  import index from '../index'

  const plugin = index.plugin

  const show = ref(false)
  const loading = ref(false)
  const form = ref(null)
  const formData = ref({})
  const formRule = {
    name: [{ required: true, message: ' ', type: 'error' }],
    code: [{ required: true, message: ' ', type: 'error' }]
  }
  const open = data => {
    formData.value = Object.assign({
      type: 0,
      classify_id: 0,
      sname: '',
      name: '', 
      code: '',
      phone: '',
      email: '',
      country: '',
      city: '',
      area: '',
      address: '',
      zip: '',
      tax: '',
      bank: '', 
      bank_name: '',
      bank_user: ''
    }, data)
    show.value = true
  }

  const onSubmit = ({ validateResult }) => {
    if (validateResult === true) {
      loading.value = true
      clientStore.update(formData.value).then(res => {
        show.value = false
        app.message('success', 'message.' + res.message)
      }).catch(err => {
        app.message('error', 'message.error.' + err.message)
      }).finally(() => {
        loading.value = false
      })
    }
  }

  const countryData = ref([])
  country().then(res => countryData.value = res)

  defineExpose({ open })
</script>